import React, { memo } from "react";
import { shallowEqual, useSelector,useDispatch } from "react-redux";
import classnames from "classnames";

import "./index.scss";
import { formatMinuteSecond } from "@/utils/format-utils";
import playActions from 'store/action/play'

const WYPlayList = memo(function (props) {
  // redux
  const { playList, currentSongIndex } = useSelector(
    (state) => ({
      playList: state.getIn(["play", "playList"]),
      currentSongIndex: state.getIn(["play", "currentSongIndex"]),
    }),
    shallowEqual
  );
  const dispatch = useDispatch()
    // 其他逻辑 
   const cutoverMis = (id,idx)=>{
    dispatch(playActions.getSongDetail(id))
   }

  return (
    <div className="panel-play-clist">
      {playList.length > 0 &&
        playList.map((item, index) => (
          <div
            key={item.id}
            className={classnames("play-item", {
              active: currentSongIndex === index,
            })}
            onClick={e=>cutoverMis(item.id,index)}
          >
            <div className="left">{item.name}</div>
            <div className="right">
              <span className="singer">{item.ar[0].name}</span>
              <span className="duration">{formatMinuteSecond(item.dt)}</span>
              <span className="sprite_playlist link"></span>
            </div>
          </div>
        ))}
    </div>
  );
});

export default WYPlayList;
